<script setup>
import { computed, onMounted, ref } from "vue";

const audioEle = ref();
const sclList = ref(new Array(16).fill(0)); //拾音灯列表

const isInit = ref(false); //是否初始化
const analyser = ref(null);
const buffer = ref([]);

const reflection = [94, 45, 4, 110, 116, 34, 123, 52, 100, 32, 99, 103, 2, 32, 126, 74]; //随机映射，让拾音灯更好看，
const colors = [
  "#fe0034",
  "#f7343a",
  "#f96336",
  "#f9883c",
  "#e9a437",
  "#e4b333",
  "#dfbe38",
  "#cfcc3d",
  "#bcd738",
  "#94dd2f",
  "#04ec35",
  "#01f635",
  "#01eb89",
  "#05debe",
  "#04d8d7",
  "#09c9e9",
  "#04acfc",
  "#0396ff",
  "#0e6eff",
  "#1930ff",
  "#5025fe",
  "#7121fd",
  "#8c1eff",
  "#ad1af9",
  "#b61efb",
  "#c71afe",
  "#d716f2",
  "#da14de",
  "#f811d1",
  "#c20780",
]; //色块列表 30

const colorsRenderComputed = computed(() => {
  return function (value) {
    const last = Math.ceil((value / 512) * 30);
    return [...colors].splice(0, last);
  };
});

onMounted(() => {
  audioEle.value.onplay = () => {
    //只需要初始化一次
    if (isInit.value) {
      return;
    }
    //创建音频上下文
    const audioCtx = new AudioContext();
    //创建分析节点
    analyser.value = audioCtx.createAnalyser();

    //   analyser.getByteFrequencyData(数组);
    analyser.value.fftSize = 512;
    //getByteFrequencyData要求传递一个类型数组（每一项取值在0-255）
    buffer.value = new Uint8Array(analyser.value.frequencyBinCount);

    //配置音频来源
    const source = audioCtx.createMediaElementSource(audioEle.value);
    source.connect(analyser.value);
    analyser.value.connect(audioCtx.destination);
    isInit.value = true;
  };
  function update() {
    requestAnimationFrame(update);
    if (!isInit.value) {
      return;
    }

    analyser.value.getByteFrequencyData(buffer.value); //传递一个数组 buffer
    console.log(buffer.value);
    // analyser.value.getByteTimeDomainData(buffer.value); //传递一个数组 buffer
    sclList.value = reflection.map(e => Array.from(buffer.value)[e] * 2);
    // console.log(sclList.value);
  }
  update();
});
</script>

<template>
  <img src="./assets/qi.jpg" alt="" />
  <div class="app">
    <div class="wrap">
      <div class="item" v-for="(item, index) in sclList" :key="index">
        <div
          class="color"
          v-for="(colorItem, colorIndex) in colorsRenderComputed(item)"
          :key="colorIndex"
          :style="{
            background: colorItem,
          }"
        ></div>
      </div>
    </div>
    <audio ref="audioEle" controls loop>
      <source src="./assets/鸳鸯戏dj.mp3" type="audio/mpeg" />
    </audio>
  </div>
  <!-- <audio ref="audioEle" src="./assets/dj.mp3" controls autoplay></audio> -->
</template>

<style scoped>
/* .app {
  width: 100vw;
  height: 100vh;
  background-image: url(./assets/qi.jpg);
  background-size: 100% 100%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(40px);
} */
img,
.app {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.app {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(20px);
}
.wrap {
  margin-top: 100px;
  width: 57vw;
  display: flex;
  justify-content: center;
  /* align-items: center; */
}
.item {
  width: 30px;
  height: 512px;
  padding: 4px;
  transform: rotate(180deg);
  margin: 0 2px;
  background-color: #000000;
}

/* .scl {
  width: 100%;
  height: 512px;
  background: linear-gradient(to top, "#ffc3ff", "#3affff", "#ff4c17");
} */
.color {
  width: 100%;
  height: 15px;
  border-radius: 4px;
  margin: 2px 0;
}
audio {
  margin: 100px 250px;
}
</style>
